<template>
  <div>
    <el-card class="card">
      <page-tools-top>
        <template #left>
          <el-input
            v-model="username"
            placeholder="根据用户名搜索"
            class="inputSearch"
          />
          <el-button size="small" @click="clearInput">清空</el-button>
          <el-button type="primary" size="small" @click="searchFn">
            搜索
          </el-button>
        </template>
        <template #right>
          <el-button type="success" size="small" @click="addUserDialog">
            新增用户
          </el-button>
        </template>
      </page-tools-top>

      <page-tools>
        <template #left> 共 {{ total }} 条记录</template>
      </page-tools>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="mobile" label="联系电话" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="permission_group_title" label="权限组名称" />
        <el-table-column prop="role" label="角色" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              v-if="row.id !== 2"
              icon="el-icon-edit"
              circle
              @click="addUserDialog(row.id, 'edit')"
            /><el-button
              v-if="row.id !== 2"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="DelUserFn(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <addUserDialog
      ref="adduser"
      :dialog-form-visible.sync="dialogFormVisible"
      @addUser="getUserList"
    />
  </div>
</template>

<script>
import { getUserListApi, DelUserApi } from '@/api/userList'
import addUserDialog from './components/addUserDialog'
export default {
  components: {
    addUserDialog
  },
  data() {
    return {
      input: '',
      tableData: [],
      page: 1, // 当前页数
      pagesize: 10, // 每页显示条数
      total: 0,
      dialogFormVisible: false, // 新增用户弹窗
      username: '' // 搜索关键词
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    // 请求用户列表
    async getUserList() {
      const obj = {
        page: this.page, // 当前页数
        pagesize: this.pagesize, // 每页显示条数
        username: this.username
      }
      const { data } = await getUserListApi(obj)
      this.total = data.counts
      this.tableData = data.list
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.getUserList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getUserList()
    },
    // 新增用户弹窗
    addUserDialog(id, val) {
      this.$refs.adduser.openDialog(id, val)
      this.dialogFormVisible = true
    },
    // 删除用户
    DelUserFn(id) {
      this.$confirm('你确认要进行删除么?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await DelUserApi(id)
          if (this.tableData.length === 1 && this.page > 1) {
            this.page--
          }
          this.$message.success('删除操作成功')
          this.getUserList()
        })
        .catch((error) => {
          console.log(error)
        })
    },
    searchFn() {
      this.getUserList()
    },
    clearInput() {
      this.username = ''
      this.getUserList()
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin: 20px;

  .inputSearch {
    width: 200px;
    margin-bottom: 10px;
    margin-right: 10px;

    .el-input__inner {
      height: 32px;
    }
  }
}
</style>
